<template>
  <div class="cluInformationList_module">
    <div class="form_box">
      <el-form :inline="true" :model="formData">
        <!-- 客户名称 -->
        <el-form-item :label="$t('clueInformation_customerName')">
          <el-input
            v-model="formData.customerName"
            :placeholder="$t('clueInformation_customerName_placeholder')"
            clearable
            v-trim
          />
        </el-form-item>

        <!-- 手机号-->
        <el-form-item :label="$t('clueInformation_phoneNum')">
          <el-input
            v-model="formData.phoneNum"
            :placeholder="$t('clueInformation_phoneNum_placeholder')"
            clearable
            v-trim
          />
        </el-form-item>
        <!-- 状态-->
        <el-form-item :label="$t('clueInformation_status')">
          <div class="select_box">
            <el-select
              v-model="formData.status"
              :placeholder="$t('clueInformation_select_placeholder')"
            >
              <el-option
                v-for="itemOpt in statusList"
                :key="itemOpt.statusId"
                :label="itemOpt.statusName"
                :value="itemOpt.statusName"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
        <!-- 搜索 -->
        <el-form-item>
          <div>
            <el-button
              type="primary"
              :icon="SearchIcon"
              @click="getTableData"
              >{{ $t("search") }}</el-button
            >
            <el-button @click="resetForm">{{ $t("reset") }}</el-button>
          </div>
        </el-form-item>
      </el-form>
      <!-- 新增 -->
      <el-button @click="handleAdd">{{
        $t("clueInformation_newAdd")
      }}</el-button>
    </div>

    <!-- 列表数据 -->

    <el-table
      ref="singleTableRef"
      :data="tableData"
      highlight-current-row
      height="500px"
      max-height="600px"
      v-loading="loading"
    >
    <template #empty>
      <div>{{$t("table_empty")}}</div>
    </template>
      <el-table-column
        type="index"
        width="100"
        :label="$t('clueInformation_no')"
      />
      <el-table-column
        property="customerName"
        :label="$t('clueInformation_customerName')"
      />
      <el-table-column
        property="phoneNumber"
        :label="$t('clueInformation_phoneNum')"
        width="120"
      />
      <el-table-column
        property="storeTypeIndustry"
        :label="$t('clueInformation_storeTypeOrindustry')"
        width="120"
      />
      <el-table-column
        property="storeCount"
        :label="$t('clueInformation_numberOfStores')"
        width="120"
      />
      <el-table-column
        property="leadSource"
        :label="$t('clueInformation_sourceOfClues')"
        width="120"
      />
      <el-table-column
        property="createTime"
        :label="$t('clueInformation_creationTime')"
        width="120"
      />
      <el-table-column
        property="status"
        :label="$t('clueInformation_status')"
      />
      <el-table-column
        property="conversionTime"
        :label="$t('clueInformation_customerConversionTime')"
        width="120"
      />
      <el-table-column :label="$t('clueInformation_operate')">
        <template #default="scope">
          <div>
            <el-button type="primary" @click="handleEditItem(scope.row)">{{
              $t("clueInformation_edit")
            }}</el-button>
            <el-button type="primary">{{
              $t("clueInformation_editFollowUpPerson")
            }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-config-provider :locale="zhCn">
    <el-pagination
      style="margin-top: 30px"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 50, 100, 200, 300, 400]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper,->,slot"
      :total="totalNum"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    </el-config-provider>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted } from "vue";
import zhCnMjs from "element-plus/dist/locale/zh-cn.mjs"
import {
  formDataType,
  StatusListType,
  SubmitDataListType,
  TableItemDataType,
} from "../../../viewModel/cluInformation/cluInformationList";
import { Search } from "@element-plus/icons-vue";

import {
  getClueInformationList,
  getLeadStatus,
} from "../../../service/clueInformation/clueInformation";
import { formatDate } from "../../../util/util";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    onMounted(() => {
      getTableData();
    });

    const router = useRouter();

    const currentPage = ref(1);
    const pageSize = ref(10);
    const totalNum = ref(0);
    const loading = ref(false)
    const zhCn = zhCnMjs
    // 状态列表的数据

    const statusList = ref<StatusListType>([]);
    getLeadStatus()
      .then((res) => {
        if (res && res.data && res.data.data) {
          statusList.value = res.data.data as StatusListType;
        }
      })
      .catch((err) => {
        console.log("失败：", err);
      });
    const SearchIcon = ref(Search);
    // 表单的数据
    const formData = reactive<formDataType>({
      customerName: "",
      phoneNum: "",
      status: "",
    });

    // 重置
    const resetForm = () => {
      formData.customerName = "";
      formData.phoneNum = "";
      formData.status = "";
      getTableData();
    };

    const tableData = ref<TableItemDataType[]>([]);

    const submitData: SubmitDataListType = reactive({
      customerId: 0, // 客户ID
      customerName: formData.customerName, // 客户姓名
      phoneNumber: formData.phoneNum, // 客户电话
      originalPhone: "", // 原始客户电话
      storeTypeIndustry: "", // 店铺类型/行业
      storeTypeIndustryId: "", // 店铺类型/行业ID
      storeCount: 1, // 店铺数量
      leadSource: "", // 线索来源
      status: formData.status, // 状态
      customerAddress: "", // 客户地址
      customerAddressDetail: "", // 客户详细地址
      remark: "", // 备注
      pageNo: currentPage.value,
      pageSize: pageSize.value,
    });
    
    // 获取列表数据
    const getTableData = () => {
      loading.value = true
      submitData.customerName = formData.customerName
      submitData.phoneNumber = formData.phoneNum
      submitData.status = formData.status
      getClueInformationList(submitData)
        .then((res) => {
          loading.value = false
          if (res.data && res.data.data) {
            totalNum.value = res.data.total || 0;
            let data = res.data.data as TableItemDataType[];
            tableData.value = data.map((item: TableItemDataType) => {
              return {
                ...item,
                conversionTime: formatDate(item.conversionTime),
                createTime: formatDate(item.createTime),
              };
            });
          }
        })
        .catch((err) => {
          loading.value = false
          console.log("失败", err);
        });
    };

    const handleSizeChange = (val: number) => {
      submitData.pageSize = val;
      getTableData();
    };
    const handleCurrentChange = (val: number) => {
      submitData.pageNo = val;
      getTableData();
    };

    // 编辑
    const handleEditItem = (payload:TableItemDataType) => {
      router.push({
        name: "editClueInformation",
        params: {
          customerId:payload.customerId
        }
      })
    };

    // 添加
    const handleAdd = () => {
      router.push("addClueInformation");
    };

    return {
      formData,
      statusList,
      SearchIcon,
      tableData,
      handleAdd,
      getTableData,
      resetForm,
      handleSizeChange,
      handleCurrentChange,
      currentPage,
      pageSize,
      totalNum,
      handleEditItem,
      loading,
      zhCn
    };
  },
});
</script>
<style scoped>
.form_box {
  display: flex;
  justify-content: space-between;
}
.select_box {
  width: 150px;
}
</style>
